<div class="container mt-5">
  <div class="row">
    <!-- 左侧：收货信息 -->
    <div class="col-md-6 d-flex">
      <div class="card p-4 shadow-sm w-100 h-100">
        <form id="checkout-form" class="w-100">
          <div class="mb-3">
            <label for="firstName" class="form-label">收件人姓名</label>
            <input
              type="text"
              class="form-control"
              id="firstName"
              placeholder="请输入姓名"
              required
            />
          </div>
          <div class="mb-3">
            <label for="phone" class="form-label">联系电话</label>
            <input
              type="tel"
              class="form-control"
              id="phone"
              placeholder="如：13800001111"
              required
            />
          </div>
          <div class="mb-3">
            <label for="email" class="form-label">邮箱地址</label>
            <input
              type="email"
              class="form-control"
              id="email"
              placeholder="例如 example@domain.com"
              required
            />
          </div>
          <div class="mb-3">
            <label for="address" class="form-label">收货地址</label>
            <input
              type="text"
              class="form-control"
              id="address"
              placeholder="如：北京市朝阳区xx路xx号"
              required
            />
          </div>
          <div class="mb-3">
            <label for="city" class="form-label">详细地址/门牌号</label>
            <input
              type="text"
              class="form-control"
              id="city"
              placeholder="楼栋/单元/门牌号"
              required
            />
          </div>

          <div class="form-check mt-3">
            <input
              class="form-check-input fw-bold"
              type="checkbox"
              value=""
              id="agree"
              required
            />
            <label class="form-check-label fw-bold" for="agree">
              我确认以上信息填写无误
            </label>
          </div>
        </form>
      </div>
    </div>

    <!-- 右侧：订单信息 -->
    <div class="col-md-6 d-flex">
      <div class="card p-4 shadow-sm w-100 h-100">
        <div class="d-flex justify-content-between border-bottom pb-2 mb-3">
          <strong>商品</strong>
          <strong>Total</strong>
        </div>
        <ul id="order-items" class="list-unstyled mb-3">
          <!-- JS 插入商品项 -->
        </ul>

        <div class="d-flex justify-content-between border-top pt-2">
          <span>总计</span>
          <strong id="subtotal">￥0.00</strong>
        </div>

        <div class="my-3">
          <label class="form-label d-block">配送方式</label>
          <div class="form-check">
            <input
              class="form-check-input"
              type="radio"
              name="shipping"
              id="shipping1"
              value="10"
              checked
            />
            <label class="form-check-label" for="shipping1"
              >标准配送（￥10.00）</label
            >
          </div>
          <div class="form-check">
            <input
              class="form-check-input"
              type="radio"
              name="shipping"
              id="shipping2"
              value="20"
            />
            <label class="form-check-label" for="shipping2"
              >加急配送（￥20.00）</label
            >
          </div>
        </div>

        <div class="my-3">
          <label class="form-label d-block">支付方式</label>
          <div class="form-check">
            <input
              class="form-check-input"
              type="radio"
              name="payment"
              id="pay1"
              value="alipay"
              checked
            />
            <label class="form-check-label" for="pay1">支付宝</label>
          </div>
          <div class="form-check">
            <input
              class="form-check-input"
              type="radio"
              name="payment"
              id="pay2"
              value="wechat"
            />
            <label class="form-check-label" for="pay2">微信支付</label>
          </div>
        </div>

        <div class="d-flex justify-content-between border-top pt-2">
          <strong>总价</strong>
          <strong id="order-total" class="text-danger fs-5">￥0.00</strong>
        </div>

        <div class="mt-4 text-end">
          <button class="btn btn-primary w-100" id="place-order-btn">
            提交订单
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
